<%@page import="model.User"%>
<%@page import="utils.LoggedUser"%>
<%@page import="snake.Player"%>
<%@page import="model.Game"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
 <%@include file="/jsp/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Snake lobby</title>

<script type="text/javascript">

<%
int gameId=(Integer)request.getSession().getAttribute("gameId");
%>


var gameId=<%=gameId%>
$(document).ready(function()
		{
			refreshLobby();
			setInterval(function() 
						{
						refreshLobby();
						}, 2000);
		});

function refreshLobby()
{
	$.post( "refreshLobby.do", { gameId: gameId},function(game)
			{
				if(game.startTime)
					{
						window.location="joinGame";
					}
						console.log(game);
				
				if(typeof game === 'undefined'|| game=="")
					{
						window.location="goToMainPage";
					}
				else
					{					
						$("#scoreLimitLabel").text("Score limit: "+game.scoreLimit);
						$("#maxPlayersLabel").text("Max players: "+game.nrOfPlayers);
						$("#descriptionLabel").text("Description: "+game.description);
						$("#players").empty();
						$("#players").append("<legend>Players</legend>");						
						
						if(game.playerList.length != game.nrOfPlayers)
							{
								$("#startButton").attr('disabled','disabled');
								console.log("enable");
							}
						else
							{
								$("#startButton").removeAttr('disabled');
								console.log("disable");
							}
						
						for (var i=0;i<game.playerList.length;i++)
							{
								$("#players").append(game.playerList[i].username+"<br>");
							}
					}
				
				
			}
		  );
}

function update()
{
	$.post( "updateLobby.do", { nrOfPlayers: $("#nrOfPlayers").val(), scoreLimit:$("#scoreLimit").val() ,description: $("#description").val()},function(data)
			{
				console.log(data);
			}
		  );
	
	
}

function leaveLobby()
{
	
	
		
}


</script>

<style type="text/css">

fieldset 
{
	width: 300px;	
}

</style>

</head>
<body>
<%
ArrayList<Game> games=(ArrayList<Game>)request.getServletContext().getAttribute("games");
for(Game g:games)
{
	System.out.println(g.getId());
}


if(games.get(gameId).getPlayerList().get(0)==LoggedUser.getUser(request.getSession()))
{
%>


<H2>Lobby <%=gameId%></H2>

<fieldset>
	<legend>Options</legend>
<label>Number of players:</label>
	<select id="nrOfPlayers">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
	</select>
	<br><br>
	<label>Score limit: </label><input id="scoreLimit" type="text" />
	<br><br>
	<label>Description:</label><br>
	<textarea rows="5" cols="50" id="description">
	</textarea>
	<br><br>
	<input type="button" name="update" value="Save changes" onclick="update()"/>
	<input id="startButton" type="button" value="Start Game" onclick="window.location.href='startGame'">
</fieldset>
<%
}
%>

<fieldset>
	<legend>Game Options</legend>
	<label id="maxPlayersLabel">Max players: </label>
	<br><br>
	<label id="scoreLimitLabel">Score limit: </label>
	<br><br>
	<label id="descriptionLabel">Description:</label>
	<br><br>
</fieldset>




<fieldset id="players">
	<legend>Players</legend>
	<%

	
	ArrayList<User> players=(ArrayList<User>)games.get(gameId).getPlayerList();
	for(User u:players)
	{
	%>
	<label><%=u.getUsername() %></label>
	<br>
	<%
	}
	%>
</fieldset>

<input type="button" value="Leave lobby" onclick="window.location.href='leaveLobby.do'">



</body>
</html>